<template>
  <view>
    <u-navbar :background="{ background: '' }" back-icon-color="#222222" title-color="#222222" title="购买服务" :immersive="true" :border-bottom="false"></u-navbar>
    <view class="" style="width: 100%; height: 280rpx; background: url(https://wenzhen.fuerle168.com/static/index/bg.png) no-repeat; background-size: 100% 100%">
      <view class="" style="padding: 76rpx 0 24rpx 28rpx"></view>
      <view class="" style="height: 15rpx"></view>
      <view class="" style="margin: 28rpx; background: #fff; box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1); border-radius: 20rpx; margin-top: 80rpx">
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 44rpx 0 44rpx 5rpx">
          <view class="" style="display: flex; align-items: center; padding-left: 30rpx">
            <image :src="info.doctor_avatar" mode="aspectFill" style="width: 112rpx; height: 112rpx; border: 2rpx solid #ffffff; border-radius: 50%"></image>
            <view class="" style="padding-left: 25rpx">
              <view class="">
                <text style="font-size: 32rpx; font-weight: bold">{{ info.doctor_name }}</text>
                <text style="font-size: 26rpx; padding-left: 15rpx">{{ info.doctor_title }}</text>
              </view>

              <view class="">
                <text style="font-size: 26rpx; color: #666666">{{ info.department_name }}</text>
                <text style="font-size: 26rpx; color: #666666; padding-left: 24rpx">{{ info.hospital_name }}</text>
              </view>
            </view>
          </view>
          <!-- 分 -->
        </view>
      </view>
    </view>
    <view class="" style="height: 60rpx"></view>
    <!-- 图文问诊 -->
    <view class="" style="margin: 28rpx; box-shadow: 0px 0px 10rpx 0px rgba(70, 70, 70, 0.05); background: #fff; border-radius: 20rpx; margin-top: 80rpx" v-if="type == 1">
      <view
        class="flex align-center"
        @tap="(current = k), getCoupon()"
        style="padding: 36rpx 31rpx 0 31rpx; display: flex; align-items: center; justify-content: space-between"
        v-for="(i, k) in info.inquiry"
        v-if="i.type != 5"
      >
        <view class="" style="font-size: 30rpx; padding-left: 12rpx">
          {{ i.type_text }}
          <text style="color: #e50014; font-weight: bold">￥{{ i.price }}/次</text>
        </view>

        <radio :checked="current == k ? true : false" color="#1A9EFF" style="transform: scale(0.7)"></radio>
      </view>

      <view class="" style="height: 30rpx"></view>
    </view>
    <!-- 多次问答 -->
    <view class="" style="margin: 28rpx; box-shadow: 0px 0px 10rpx 0px rgba(70, 70, 70, 0.05); background: #fff; border-radius: 20rpx" v-if="type == 2">
      <view class="" v-for="(i, k) in info.inquiry" :key="k" v-if="i.type == 5">
        <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 26rpx 38rpx 24rpx 22rpx">
          <view class="" style="display: flex; align-items: center">
            <image src="https://wenzhen.fuerle168.com/static/index/xx.png" mode="" style="width: 50rpx; height: 50rpx"></image>
            <view class="" style="font-size: 30rpx; padding-left: 12rpx">
              {{ i.type_text }}
            </view>
            <view class="" style="color: #e50014; padding-left: 10rpx">
              <text style="font-weight: bold">￥{{ i.price }}/</text>
              <text style="font-size: 24rpx">{{ i.number }}次提问</text>
            </view>
          </view>
          <radio :checked="true" color="#1A9EFF" style="transform: scale(0.7)"></radio>
        </view>
        <!-- 介绍 -->
        <view class="" style="font-size: 26rpx; padding-left: 26rpx">包含{{ i.number }}次提问，适用于问题较多的情况</view>
        <view class="" style="font-size: 26rpx; padding-left: 26rpx; padding-top: 10rpx; padding-bottom: 55rpx">购买后，您将获得医生{{ i.number }}次回复。</view>
      </view>
    </view>
    <!-- 支付方式 -->
    <view class="" style="margin: 28rpx; box-shadow: 0px 0px 10rpx 0px rgba(70, 70, 70, 0.05); background: #fff; border-radius: 20rpx">
      <view class="" style="padding: 31rpx; font-size: 32rpx; font-weight: bold">支付方式</view>
      <!-- 微信支付 -->
      <view class="flex align-center" @tap="radio = 0" style="padding: 0 31rpx 0 31rpx; display: flex; align-items: center; justify-content: space-between">
        <view class="" style="display: flex; align-items: center">
          <image src="https://wenzhen.fuerle168.com/static/index/wxpay.png" mode="" style="width: 70upx; height: 70upx"></image>
          <view class="flex-sub margin-left-sm" style="font-size: 28rpx; padding-left: 12rpx">微信支付</view>
        </view>
        <radio :checked="radio == 0 ? true : false" color="#1A9EFF" style="transform: scale(0.7)"></radio>
      </view>
      <!-- 支付宝支付 -->
      <!-- <view
        class="flex align-center margin-top"
        @tap="radio = 1"
        style="padding: 0 31rpx 0 31rpx; display: flex; align-items: center; justify-content: space-between; padding-top: 15rpx"
      >
        <view class="" style="display: flex; align-items: center">
          <image src="http://wenzhen.jiangkukeji360.com/static/index/zfbpay.png" mode="" style="width: 70upx; height: 70upx"></image>
          <view class="flex-sub margin-left-sm" style="font-size: 28rpx; padding-left: 12rpx">支付宝支付</view>
        </view>

        <radio :checked="radio == 1 ? true : false" color="#1A9EFF" style="transform: scale(0.7)"></radio>
      </view> -->
      <view class="" style="height: 30rpx"></view>
    </view>
    <view
      class=""
      style="display: flex; align-items: center; margin: 20rpx 28rpx; height: 100rpx; background: #fff; border-radius: 20rpx; font-size: 28rpx; justify-content: space-between"
    >
      <view class="" style="padding-left: 34rpx">优惠券</view>
      <view class="" style="padding-right: 39rpx">￥{{ coupon.discount }}</view>
    </view>

    <!-- 温馨提示 -->
    <view class="" style="font-size: 26rpx; color: #666666; padding-left: 63rpx">温馨提示</view>
    <view class="" style="font-size: 26rpx; color: #666666; padding: 22rpx 63rpx">*号源由医生本人提供、与医生无关。到医院需按医院门 诊价格缴纳医事服务费</view>
    <view class="" style="height: 120rpx"></view>

    <!-- 底部栏 -->
    <view
      class=""
      style="
        width: 100%;
        position: fixed;
        height: 120rpx;
        background: #ffffff;
        box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.12);
        border-radius: 20rpx 20rpx 0px 0px;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      "
    >
      <view class="" style="font-size: 28rpx; margin-right: 28rpx" v-if="info.inquiry && info.inquiry[current]">
        实付：￥{{ type == 2 ? duo.price : info.inquiry[current].price - coupon.discount }}
      </view>
      <view class="btn" style="margin-right: 50rpx" @tap="pay">确定支付</view>
    </view>
    <u-modal v-model="show" content="您当前还未有就诊人,请先添加" :show-cancel-button="true" @confirm="confirm"></u-modal>
    <u-modal v-model="shows" :show-cancel-button="true" title="选择患者" @confirm="confirm1">
      <view class="slot-content">
        <view
          class=""
          v-for="(i, k) in jook"
          :key="k"
          style="display: flex; align-items: center; font-size: 28rpx; justify-content: space-between; padding: 28rpx 51rpx"
          @tap="cull = k"
        >
          <view class="">
            {{ i.patient_name }}
          </view>
          <radio :checked="cull == k" style="transform: scale(0.7)" color="#0FB8FF"></radio>
        </view>
      </view>
      <view class="" style="text-align: center; font-size: 30rpx; color: #1a9eff; padding: 30rpx" @tap="add">添加患者</view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      radio: 0,
      current: 0,
      id: null,
      info: {},
      type: null,
      coupon: {},
      duo: {},
      u_type: null,
      show: false,
      shows: false,
      data: [],
      jook: [],
      cull: 0
    };
  },

  //方法
  methods: {
    confirm1() {
      this.api({
        url: '/api/order/create',
        method: 'post',
        data: {
          doctor_id: this.id,
          inquiry_id: this.type == 2 ? this.duo.id : this.info.inquiry[this.current].id,
          type: 'wechat',
          // method: 'app',
          coupon_id: this.coupon.coupon_id,
          patient_id: this.jook[this.cull].patient_id
        }
      }).then((res) => {
        if (res.data.response == '') {
          uni.showToast({
            title: '支付成功',
            icon: 'none'
          });

          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/news/news'
            });
          }, 1000);
        }
        {
          console.log(res.data.response);
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: res.data.response.timeStamp,
            nonceStr: res.data.response.nonceStr,
            package: res.data.response.package,
            signType: res.data.response.signType,
            paySign: res.data.response.paySign,
            success: function (res) {
              uni.showToast({
                title: '支付成功',
                icon: 'none'
              });

              setTimeout(() => {
                uni.reLaunch({
                  url: '/pages/news/news'
                });
              }, 1000);
            },
            fail: function (err) {
              uni.showToast({
                title: '支付失败',
                icon: 'none'
              });
            }
          });
        }
      });
    },
    add() {
      uni.navigateTo({
        url: '/user/data/data'
      });
    },
    confirm() {
      uni.navigateTo({
        url: '/user/data/data'
      });
    },
    oss() {
      this.api({
        url: '/api/index/patientList',
        method: 'post'
      }).then((res) => {
        this.data = res.data;
      });
    },
    detail() {
      this.api({
        url: '/api/doctor/details',
        method: 'post',
        data: {
          doctor_id: this.id
        }
      }).then((res) => {
        this.info = res.data;

        if (this.u_type) {
          this.info.inquiry.map((i, k) => {
            if (i.type == this.u_type) {
              this.current = k;
            }
            console.log(this.current);
          });
        }
        this.info.inquiry.map((i) => {
          if (i.type == 5) {
            this.duo = i;
          }
        });
        this.getCoupon();
      });
    },
    pay() {
      if (this.data == '') {
        this.show = true;
        return false;
      }
      this.shows = true;
    },
    getCoupon() {
      this.api({
        url: '/api/shop/getCoupon',
        method: 'post',
        data: {
          all_price: this.type == 2 ? this.duo.price : this.info.inquiry[this.current].price,
          style: 1
        }
      })
        .then((res) => {
          this.coupon = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    gets() {
      this.api({
        url: '/api//index/patientList',
        method: 'post'
      }).then((res) => {
        this.jook = res.data;
        this.jook.map((i, k) => {
          if (i.default == 1) {
            this.cull = k;
          }
        });
      });
    }
  },
  //首页渲染
  onLoad(options) {
    this.id = options.id;
    this.type = options.type;

    this.detail();
    if (options.u_type) {
      this.u_type = options.u_type;
    }
  },
  onShow() {
    this.oss();
    this.gets();
  }
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}

.btn {
  width: 200rpx;
  height: 76rpx;
  background: linear-gradient(0deg, #1a9eff, #0fb8ff);
  border-radius: 38rpx;
  color: #ffffff;
  font-size: 32rpx;
  line-height: 76rpx;
  text-align: center;
}
</style>
